import React, { useState, useEffect } from 'react';
import { Search } from 'react-vant';
import axios from '../../../utilis/index'
import { Tabs } from 'react-vant';
import '../../../pai/index'
import { useDispatch, useSelector } from 'react-redux'
import { SETLIST, ALLTYPELIST,GETCHILDERLIST } from '../../../types/store.d'

export default function Books() {
    const dispatch = useDispatch()
    const [value, setValue] = useState('');

    useEffect(() => {
        axios.get('/api/list').then(res => {
            
            dispatch({
                type: SETLIST,
                payload: res.data.list
            })
        })
    }, [])

    const list = useSelector((state: ALLTYPELIST) => {
        return state.list
    })
     console.log(list);
     
   
    const childrenlist = useSelector((state:ALLTYPELIST)=>{
        return state.childrenlist
    })
     console.log(childrenlist);
     const handlist=(index:any)=>{
         dispatch({
            type:GETCHILDERLIST,
            payload:index
         })
     }
    return (
        <div>
            <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" />


            <div className="demo-tabs">
                <Tabs active={0}  onChange={handlist}>
                    {list.map((item,index) => (
                        <Tabs.TabPane key={index} title={item.user}>
                            {
                                childrenlist.map((val,i)=>{
                                    return <p className='poi' key={i}>
                                        <img src={val.img} alt="" />
                                        <p>{val.user}</p>
                                      
                                       
                                        
                                        </p>
                                })
                            }
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>


           

        </div>
    )
}
